package com.tinusgraglin.enclusiv.ui.screens

import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import coil.request.ImageRequest
import com.tinusgraglin.enclusiv.EnclusivApp
import com.tinusgraglin.enclusiv.R
import com.tinusgraglin.enclusiv.Util
import com.tinusgraglin.enclusiv.ui.viewmodel.MainActivityViewModel
import com.tinusgraglin.enclusiv.ui.theme.AlertRed
import com.tinusgraglin.enclusiv.ui.theme.BlueMain
import com.tinusgraglin.enclusiv.ui.theme.PurpleMain

private sealed class TopBarItem(val iconResource: Int, val description: String, val onClick: () -> Unit) {
    object EditProfile : TopBarItem(R.drawable.edit, "Icon: Edit Profile", {

    })
    object Messages : TopBarItem(R.drawable.mail, "Icon: Messages", {

    })
    object Settings : TopBarItem(R.drawable.setting, "Icon: Settings", {

    })
}

private sealed class StatsItem(val name: String, val iconResource: Int, onClick: () -> Unit) {
    object Articles : StatsItem("Articles", R.drawable.paper, {

    })
    object Liked : StatsItem("Liked", R.drawable.like, {

    })
    object Faved : StatsItem("Faved", R.drawable.love, {

    })
    object Listened: StatsItem("Listened", R.drawable.followed, {

    })
    object Listeners: StatsItem("Listener", R.drawable.users_with_heart, {

    })
}

@Composable
fun MeScreen(viewModel: MainActivityViewModel) {
    val topBarItems = listOf(
        TopBarItem.EditProfile,
        TopBarItem.Messages,
        TopBarItem.Settings
    )
    val statsItems = listOf(
        StatsItem.Articles,
        StatsItem.Liked,
        StatsItem.Faved,
        StatsItem.Listened,
        StatsItem.Listeners
    )
    val statsItemsChunkedBy4 = statsItems.chunked(4)

    Surface(modifier = Modifier.fillMaxSize()) {
        Box {
            Column(modifier = Modifier.padding(horizontal = 10.dp).align(Alignment.TopCenter)) {
                Row(modifier = Modifier.align(Alignment.End)) {
                    topBarItems.forEach {
                        IconButton(onClick = it.onClick) {
                            Icon(
                                painter = painterResource(it.iconResource),
                                contentDescription = it.description,
                                modifier = Modifier.size(16.dp)
                            )
                        }
                    }
                }

                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    AsyncImage(
                        model = ImageRequest.Builder(LocalContext.current).apply {
                            data(Util.toImageUrl("profile_img/image", viewModel.loggedInUserProfile.id))
                            placeholder(R.drawable.user)
                        }.build(),
                        imageLoader = EnclusivApp.globalCoilImageLoader,
                        contentDescription = "Image: User Profile Image",
                        modifier = Modifier
                            .size(80.dp)
                            .clip(CircleShape)
                            .border(
                                width = 2.dp,
                                brush = Brush.linearGradient(listOf(PurpleMain, BlueMain)),
                                shape = CircleShape
                            )
                    )
                    Spacer(Modifier.width(10.dp))
                    Text(
                        text = viewModel.loggedInUserProfile.name,
                        fontWeight = FontWeight.Bold,
                        fontSize = 20.sp,
                        maxLines = 2,
                        softWrap = true,
                        overflow = TextOverflow.Ellipsis
                    )
                }

                Spacer(Modifier.height(6.dp))

                Text(
                    modifier = Modifier
                        .border(
                            width = 1.dp,
                            brush = Brush.linearGradient(listOf(PurpleMain, BlueMain)),
                            shape = RoundedCornerShape(20)
                        )
                        .padding(10.dp),
                    text = viewModel.loggedInUserProfile.signature ?: "(Write your first signature!)",
                    fontStyle = FontStyle.Italic,
                    fontSize = 12.sp,
                    maxLines = 2,
                    softWrap = true,
                    overflow = TextOverflow.Ellipsis
                )

                Spacer(Modifier.height(20.dp))

                statsItemsChunkedBy4.forEachIndexed { i, it ->
                    Row(modifier = Modifier.fillMaxWidth()) {
                        it.forEachIndexed { idx, item ->
                            Box(
                                modifier = Modifier
                                    .fillMaxWidth((1.0 / (4.0 - idx.toFloat())).toFloat())
                                    .aspectRatio(1.0F)
                                    .clickable(
                                        onClick = {

                                        },
                                        interactionSource = remember { MutableInteractionSource() },
                                        indication = rememberRipple(),
                                    ),
                                contentAlignment = Alignment.Center
                            ) {
                                Column(
                                    horizontalAlignment = Alignment.CenterHorizontally
                                ) {
                                    Icon(
                                        painter = painterResource(item.iconResource),
                                        contentDescription = "Icon Button: ${item.name}",
                                        modifier = Modifier
                                            .size(32.dp)
                                    )
                                    Spacer(Modifier.height(2.dp))
                                    Text(
                                        modifier = Modifier,
                                        text = item.name,
                                        fontSize = 11.sp,
                                    )
                                }
                            }
                        }
                    }
                }

            }

            Button(
                onClick = {

                },
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .padding(horizontal = 40.dp).padding(bottom = 60.dp)
                    .align(Alignment.BottomCenter),
                shape = RoundedCornerShape(50),
                colors = ButtonDefaults.buttonColors(
                    backgroundColor = AlertRed,
                    contentColor = Color.White
                )
            ) {
                Text(
                    text = "LOG OUT",
                    fontSize = 12.sp,
                    fontWeight = FontWeight.Bold,
                )
            }
        }

    }
}